<!--hmc 标签选择组件-->
<template>
  <div class="container">
    <div>
      <p class="font18 color333 mb30">标签选择</p>
    </div>
    <el-table :data="tableDataAdded" v-loading="loading">
      <el-table-column align="center" label="标签值" prop="labelName">
        <template slot-scope="scope">
          <span>{{scope.row.labelName==null||scope.row.labelName==''?'-':scope.row.labelName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="标签名" prop="firstLabelName">
        <template slot-scope="scope">
          <span>{{scope.row.firstLabelName==null||scope.row.firstLabelName==''?'-':scope.row.firstLabelName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="标签属性" prop="secondLabelName">
        <template slot-scope="scope">
          <span>{{scope.row.secondLabelName==null||scope.row.secondLabelName==''?'-':scope.row.secondLabelName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="标签类型"  :formatter="typeFormatter" prop="labelType"></el-table-column>
    </el-table>

    <!--分页栏-->
    <div class="toolbar t_r">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="refreshPageRequest1"
        @size-change="handleSizeChange1"
        :current-page="pageRequest1.pageNum"
        :page-size="pageRequest1.pageSize"
        :total="tableTotalAdded"
        :page-sizes="[10, 20, 30, 40]"
      ></el-pagination>
    </div>

    <div slot="footer" class="dialog-footer t_c">
      <el-button class="searchButton" size="small" @click="handleClose">确定</el-button>
    </div>
  </div>
</template>

<script>
  // 自动化营销-----标签选择组件
  export default {
    name: "selection",
    data() {
      return {
        memberNumber:0,//删选出的会员数
        //已添加标签 过滤Form表单
        lookFilters: {
          labelType: "",
          labelName: "",
        },
        //标签选择 过滤Form表单
        filters: {
          labelType: "",
          labelName: "",
        },
        labelAdded:[],//已添加的标签
        tableData: [],
        tableDataAdded: [],
        dataForm: {
          name:"",
        },
        //翻页
        pageRequest: {
          pageNum: 1,
          pageSize: 10
        },
        //翻页
        pageRequest1: {
          pageNum: 1,
          pageSize: 10
        },
        //翻页 总条目数
        tableTotal: 0,
        //翻页 总条目数
        tableTotalAdded: 0,
        //标签类型
        typeList: [{value: '1', label: '模型标签'}, {value: '2', label: '自定义标签'}],
        //select 值
        value: "",
        //form规则
        dataFormRules: {
          name: [
            {required: true, message: "请输入活动名称", trigger: "blur"},
            {min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur"}
          ]
        }
      };
    },
    components: {},

    props: {
      nodeInfo: {
        type: Object,
      },
      journeyId: {
        type: String,
        default: '',
      },
      loading: false,
    },

    methods: {
      //子关闭 标签选择弹框
      handleClose:function() {
        this.$emit("handleClose", false);
      },

      //已添加标签初始化
      getBranchNodeDetail:function(){
        let this_=this
        let param={}
        param.branchNodeId=this_.nodeInfo.nodeId
        this.utils.request.getBranchNodeDetail(param, function (res) {
          if (res.code == "0000") {
            if(res.data.nodeVariable!=null){
              JSON.parse(res.data.nodeVariable,function (key,value) {
                if(key=="name" &&value!=null){
                  this_.dataForm.name=value;
                }
                if(key=="labelId" && value!=null){
                  this_.labelAdded.push(value)
                }
              })
              this_.getAddedLabel()
            }
          } else {

          }
        });
      },

      //标签类型formatter
      typeFormatter: function (row, column, cellValue, index) {
        if (cellValue == "1") {
          return '模型标签'
        } else if (cellValue == "2") {
          return '自定义标签'
        } else {
          return "-"
        }
      },

      //获取已添加标签数据
      getAddedLabel: function () {
        this.loading = true;
        let param = {}
        let this_ = this
        if (this_.lookFilters == undefined || this_.lookFilters == null) {
          this_.lookFilters = {};
        }
        this_.lookFilters.start = this_.pageRequest1.pageNum;
        this_.lookFilters.limit = this_.pageRequest1.pageSize;
        this_.lookFilters.labelIds = this_.labelAdded;
        this.utils.request.getAddedLabel(this_.lookFilters, function (res) {
          if (res.code == "0000") {
            this_.tableDataAdded = res.data.rows
            this_.tableTotalAdded = res.data.total
          } else {
            this_.tableDataAdded = []
            this_.tableTotalAdded = 0
          }
          this_.loading = false;
        });
      },
      //表单重置
      resetForm1:function () {
        this.lookFilters={
          labelType: "",
          labelName: "",
        }
        this.getAddedLabel()
      },
      // 每页数据刷新
      refreshPageRequest1: function (pageNum) {
        this.pageRequest1.pageNum = pageNum;
        this.getAddedLabel()

      },
      // 每页条数刷新
      handleSizeChange1: function (pageSize) {
        this.pageRequest1.pageSize = pageSize;
        this.getAddedLabel()
      },
      //表单重置
      resetForm:function () {
        this.filters={
          labelType: "",
          labelName: "",
        }
        this.getAllLabelByDeptId()
      },

    },

    created() {
    },
    mounted(){
      this.getBranchNodeDetail()
    }
  };
</script>
<style lang="scss" scoped>
  .border{
    width: 1004px;
    border: 1px solid #999999;
    border-radius: 4px;
    padding: 30px;
  }
  // .mr220{
  //   margin-right: 220px !important;
  // }
  .btns{
    /deep/ .el-form-item__content{
      margin-right: 0 !important;
    }
  }
  .mb10{
    margin-bottom: 10px !important;
  }
  .mr90{
    margin-right: 90px !important;
  }
  /deep/ .el-pagination{
    .el-input__inner{
      width: 100% !important;
    }
  }
  .checkAddedTags{
    /deep/    .el-dialog__header{
      text-align: center;
    }
  }
</style>

